import { chartEncaps } from './chartEncaps.js'

let drawd1 = obj => {
  // obj = {
  //   _t: this,
  //   doms: 'mycharts
  // }
  let n = obj._t.chartsConData.areaRange
  let max = obj._t.chartData.reduce((a, b) => {
    a = a.value ? a.value : a
    b = b.value ? b.value : b
    return b > a ? b : a
  })
  let min = obj._t.chartData.reduce((a, b) => {
    a = a.value ? a.value : a
    b = b.value ? b.value : b
    return b < a ? b : a
  })
  if (obj._t.changeArea) {
    n.forEach((element, index) => {
      if (index < n.length) {
        let num = Math.ceil((max / n.length) * (index + 1))
        index === 0
          ? (n[index].start = min)
          : (n[index].start = n[index - 1].end)
        index === n.length - 1 ? (n[index].end = max) : (n[index].end = num)
      }
    })
  }

  let ww = obj._t.$refs.mycharts
  if (ww.innerHTML !== '') {
    ww.innerHTML = ''
    obj._t.chart = {}
  }
  // obj._t.chart = new obj._t.$Chart({
  //         container: obj.doms,
  //         width: 808,
  //         height: 767,
  //         padding: [20, 10]
  //     })
  let w = 778
  let h = 732
  let pad

  let statAreaAttr = obj._t.chartsConData.statAreaAttr
  switch (statAreaAttr) {
    case '380':
      if (obj._t.chartsConData.thumbnail === '1') {
        w = 778
        h = 732
        pad = [50, 10, 40, 10]
      } else {
        w = 778
        h = 745
        pad = [10, 10, 0, 10]
      }
      break
    default:
      w = obj._t.chartsConData.citySize[statAreaAttr]
        ? obj._t.chartsConData.citySize[statAreaAttr][0]
        : w
      h = obj._t.chartsConData.citySize[statAreaAttr]
        ? obj._t.chartsConData.citySize[statAreaAttr][1]
        : h
      pad = [30, 30]
  }
  obj._t.chart = new obj._t.$Chart({
    container: obj.doms,
    width: w,
    height: h,
    padding: pad
  })
  // 绘制地图背景
  let userData = obj._t.chartData
  chartEncaps.setJson({ _t: obj._t }).then(res => {
    if (!res) {
      let obj1 = {
        message: '地理数据获取失败，请重新获取',
        type: 'info'
      }
      obj._t.$message({ ...obj._t.tipsParams, ...obj1 })
      obj._t.setLoading(false)
      obj._t.setshadeDisplay(true)
      return
    }

    obj._t.chart.tooltip({
      showTitle: false,
      showMarkers: false,
      shared: true,
      itemTpl:
        '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{value}</li>'
    })
    // 同步度量
    obj._t.chart.scale({
      longitude: {
        sync: true
      },
      latitude: {
        sync: true
      }
    })
    obj._t.chart.axis(false)
    chartEncaps.setLegend({ _t: obj._t, data: 'trend' })

    let callList = []
    for (let i in userData) {
      for (let j in res.features) {
        if (res.features[j].properties.name === userData[i].name) {
          callList.push(userData[i])
          break
        }
      }
    }
    userData = callList
    const ds = new obj._t.$DataSet()
    const chinaMap = ds.createView('back').source(res, {
      type: 'GeoJSON'
    })
    const userDv = ds
      .createView()
      .source(userData)
      .transform({
        geoDataView: chinaMap,
        field: 'name',
        type: 'geo.region',
        as: ['longitude', 'latitude']
      })
      .transform({
        type: 'map',
        callback: ob => {
          let ran = obj._t.chartsConData.areaRange
          ran.forEach((element, i) => {
            if (i !== ran.length - 1) {
              if (ob.value >= ran[i].start && ob.value < ran[i].end) {
                ob.trend = ran[i].text
              }
            } else {
              if (ob.value >= ran[i].start && ob.value <= ran[i].end) {
                ob.trend = ran[i].text
              }
            }
          })
          return ob
        }
      })

    const userView = obj._t.chart.createView()
    userView.data(userDv.rows)
    if (obj._t.chartsConData.statAreaAttr === '380') {
      userView
        .polygon()
        .position('longitude*latitude')
        .color('trend', obj._t.color)
        .tooltip('name*trend')
        .style({
          fillOpacity: 0.85,
          lineWidth: 1,
          stroke: '#333'
        })
        .animate({
          leave: {
            animation: 'fade-out'
          }
        })
    } else {
      if (obj._t.chartsConData.cityShow === '1') {
        userView
          .polygon()
          .position('longitude*latitude')
          .color('trend', obj._t.color)
          .tooltip('name*trend')
          .style({
            fillOpacity: 0.85,
            lineWidth: 1,
            stroke: '#333'
          })
          .label('name', name => {
            let offset = 0
            switch (statAreaAttr) {
              case '727':
                switch (name) {
                  case '东城区':
                    offset = -20
                    break
                }
                break
              default:
                offset = 0
            }

            return {
              offset,
              style: {
                fill: '#000',
                fontSize: obj._t.chartsConData.textSize // 文本大小
              }
            }
          })
          .animate({
            leave: {
              animation: 'fade-out'
            }
          })
      } else {
        userView
          .polygon()
          .position('longitude*latitude')
          .color('trend', obj._t.color)
          .tooltip('name*trend')
          .style({
            fillOpacity: 0.85,
            lineWidth: 1,
            stroke: '#333'
          })
          .animate({
            leave: {
              animation: 'fade-out'
            }
          })
      }
    }

    userView.interaction('element-active')
    obj._t.chart.render()
    if (obj._t.chartsConData.statAreaAttr === '380') {
      obj._t.mapFlag = true
      chartEncaps.setDisplay({ doms: obj.doms, display: 'block' })
    } else {
      obj._t.mapFlag = false
      chartEncaps.setDisplay({ doms: obj.doms, display: 'table' })
    }

    obj._t.setLoading(false)
    obj._t.setshadeDisplay(true)
    obj._t.setChangeArea(false)
  })
}

export { drawd1 }
